<template>
  <el-table :data="tableData" height="250" style="width: 100%">
    <el-table-column prop="id" label="OrderId" width="240" />
    <el-table-column
      prop="descrip"
      label="Descrip"
      width="280"
      show-overflow-tooltip
    />
    <el-table-column sortable prop="status" label="Status" />
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button
          type="danger"
          :disabled="canButtun(scope.row)"
          @click="handleEdit(scope.$index, scope.row)"
          >结算</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
const tableData = ref([]);
onMounted(() => {
  axios({
    method: "GET",
    url: "http://localhost:9090/trainT/getAllOrders",
  }).then((response) => {
    tableData.value = response.data;
  });
});
const canButtun = (row: Order) => {
  if (row.status == 0) return false;
  else return true;
};
interface Order {
  id: string;
  descrip: string;
  status: number;
}
const handleEdit = (index: number, row: Order) => {
  // 编辑按钮
  axios({
    method: "GET",
    url: "http://localhost:9090/trainT/payForOrder",
    params: {
      id: row.id,
    },
  }).then((response) => {
    tableData.value = response.data;
  });
  // console.log(router.currentRoute.value.query.data);
};
</script>
